<template>
  <div class="w-full h-full min-h-screen flex justify-center items-center bg-img">
    <div class="bg-global">
      <img src="@/assets/img/login/global.png" class="global-img mr-10" />
    </div>
    <div
      class="w-auto h-auto register-container my-10"
      style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)"
    >
      <div class="flex flex-col items-center">
        <span class="font-sans text-4xl leading-13 font-semibold">欢迎，注册!</span>

        <div class="text-xl font-thin">
          <span class="text-xl font-thin">已有帐号，</span>
          <el-link href="/login"><span class="text-xl font-thin">去登陆</span> </el-link>
        </div>
      </div>
      <form-register />
    </div>
  </div>
</template>

<script setup>
import formRegister from './components/form-register.vue';
</script>

<style scoped>
.bg-img {
  background-image: url('@/assets/img/login/bg.png');
}

.register-container {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.register-container::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: blur(1px);
  z-index: -1;
  margin: -30px;
}
</style>
